<template>
  <view class="list-container">


    <!-- 列表内容 -->
    <scroll-view scroll-y class="list-content">
      <view v-for="(item, index) in listData" :key="index" class="list-item" @click="handleItemClick(item)">
        <!-- 图片 -->
        <image :src="item.img" class="item-image" mode="aspectFill" @error="handleImageError" />

        <!-- 内容区域 -->
        <view class="item-content">
          <text class="item-name">{{ item.name }}</text>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="listData.length === 0" class="empty-state">
        <text class="empty-text">暂无数据</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const customerGetRef=ref({})
const listData=ref([
  // {
  //   name: '示例项目1',
  //   url: 'https://example1.com',
  //   img: 'https://via.placeholder.com/80x80/007bff/ffffff?text=1'
  // },
  // {
  //   name: '示例项目2',
  //   url: 'https://example2.com',
  //   img: 'https://via.placeholder.com/80x80/28a745/ffffff?text=2'
  // },
  // {
  //   name: '示例项目3',
  //   url: 'https://example3.com',
  //   img: 'https://via.placeholder.com/80x80/dc3545/ffffff?text=3'
  // },
  // {
  //   name: '示例项目4',
  //   url: 'https://example4.com',
  //   img: 'https://via.placeholder.com/80x80/ffc107/ffffff?text=4'
  // }
])
onLoad(()=>{
  customerGetRef.value=uni.getStorageSync('customerGet')
  if(customerGetRef.value){
    listData.value=(customerGetRef.value)
  }

})




// 点击列表项的处理方法
const handleItemClick = (item) => {
  console.log('点击了项目:', item)
  // #ifdef H5
  window.location.href = item.url
  // #endif
  // #ifdef APP-PLUS
  plus.runtime.openURL(item.url);
  // #endif
  // 可以根据需要进行页面跳转或其他操作
  // uni.showToast({
  //   title: `点击了: ${item.name}`,
  //   icon: 'none'
  // })

  // 如果需要跳转到URL，可以这样做：
  // if (item.url) {
  //   uni.navigateTo({
  //     url: `/pages/webview/webview?url=${encodeURIComponent(item.url)}`
  //   })
  // }
}

// 图片加载失败的处理
const handleImageError = () => {
  console.log('图片加载失败')
}
</script>

<style scoped lang="scss">
.list-container {
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}


.list-content {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;

}

.list-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  box-sizing: border-box;

  &:active {
    transform: scale(0.98);
    background-color: #f8f9fa;
  }
}

.item-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
  background-color: #f0f0f0;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-url {
  font-size: 26rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrow {
  margin-left: 20rpx;

  .arrow-icon {
    font-size: 32rpx;
    color: #ccc;
    font-weight: bold;
  }
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

// 响应式设计
@media screen and (max-width: 750rpx) {
  .list-item {
    padding: 24rpx;
  }

  .item-image {
    width: 60rpx;
    height: 60rpx;
  }

  .item-name {
    font-size: 28rpx;
  }

  .item-url {
    font-size: 24rpx;
  }
}
</style>
